Making a blogging system with Phoenix and React [Intro]

I finally made a blog! And what better to celebrate than to write a blog post about how to create such a very bare-bone content system? (Look at me nailing this SEO)

Here's an intro :

Aside from my freelance work and Charsh my personal project, I'm also developing Rriver. It's my custom-made invoicing/billing tool that also serves as an API for the content you see on this website.
After reconsidering my approach to social media and my online presence, I told myself "Why not a blog?". So here we are. The latest addition to my swiss-army knife of a freelance tool.

This is a project in 3 parts. This is just the introduction. While it is not a step-by-step/ code along, I invite you to give it a try. I may not have taken the most logical steps but I was challenging myself and attempting to do it all on my own.

The tools :

For the past 6 months, I have been using Phoenix for my APIs or anything that needs to be quickly set-up. It is a framework that uses the Elixir language. While its biggest strength is dealing with real-time data (ie. a synchronized music player), it's fine more traditional uses too and I enjoy the Elixir syntax.

For the front-end, I am using React, a Javascript library that allows you to compile "JSX" into HTML.

The challenges

The main part of the challenge for me was to explore Phoenix LiveView some more. Integrating a rich-text compositor felt like it would be the perfect match for what I need.

It was already a feature of Rriver at this time, for things such as invoice and billing conditions, descriptions, etc.

I used CKEditor to accomplish this somewhat fast and clean (I really needed that bold). The setup was a simple script that would replace whatever textarea with a CKEditor instance. The input would get picked up by Liveview upon submission.
To the tools' credit, that part was seamless.

However I was not happy with just using a CDN. It caused weird stuttering when Liveview was updating because the resource was re-fetched and I wasn't a fan of the UI. Yes, there were probably quite a few ways to fix all of this. But I had something else in mind : Milkdown.

Tldr; Milkdown is minimal, highly customisable Markdown editor. It also came in an NPM package, which is exactly what I wanted to try out.

The plan:

My immediate needs for my blog feature are as follows :

• Inject HTML into the form

• Feed the front-end via API

• Only show blog posts if their published date < today

Then for later:

• Include footnotes¹
  
  

• Have an RSS feed

This blog series will have three parts :

1. Setting up Milkdown in Phoenix Liveview Part 1

2. Creating our Phoenix API resources for the Blog and Posts Part 2 and 3

3. Displaying posts on the front-end through the API Link to be determined

See you in the next one !

1

Spoiler alert: it's done :)